<template>
    <ui-main title="日期时间组件" no-padding>
        <!--<div class="item one flex ui">
            <div class="one item ui scrollbar"></div>
        </div>-->
        <div class="p-20 ">
            <h3>实例-日期</h3>
            <table class="ui celled striped table">
                <thead>
                <tr>
                    <th width="10%">说明</th>
                    <th width="30%">实例</th>
                    <th width="30%">返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        日期
                    </td>
                    <td>
                        <ui-date-time-picker uneditable unclearable v-model="value1" size="mini" timeString @change="changeFn"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value1}}
                    </td>
                </tr>
                <tr>
                    <td>
                        最小值限制（{{minDate}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value2" type="date" placeholder="选择日期" :min-date="minDate"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value2}}
                    </td>
                </tr>
                <tr>
                    <td>
                        最大值限制（{{maxDate}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value3" type="date" placeholder="选择日期" :max-date="maxDate"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value3}}
                    </td>
                </tr>
                <tr>
                    <td>
                        最小值限制（{{minDate}}）<br> 最大值限制（{{maxDate}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value4"
                            type="date"
                            placeholder="选择日期"
                            :min-date="minDate"
                            :max-date="maxDate"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value4}}
                    </td>
                </tr>
                <tr>
                    <td>
                        月
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value6" type="month" format="yyyy-MM" placeholder="选择月"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value6}}
                    </td>
                </tr>
                <tr>
                    <td>
                        年
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value7" type="year" format="yyyy" placeholder="选择年"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value7}}
                    </td>
                </tr>
                <tr>
                    <td>
                        独立日期范围
                    </td>
                    <td>
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker v-model="value9"
                                :max-date="value10"
                                size="mini"
                                placeholder="选择开始日期"></ui-date-time-picker>
                        </div>
                        至
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker v-model="value10"
                                :min-date="value9"
                                placeholder="选择结束日期"
                                size="mini"></ui-date-time-picker>
                        </div>
                    </td>
                    <td>
                        {{value9}} 至 {{value10}}
                    </td>
                </tr>
                <tr>
                    <td>
                        日期范围range
                    </td>
                    <td>
                        <ui-date-time-picker :range="true"
                            :model-start.sync="value11"
                            :model-end.sync="value12"
                            size="mini"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value11}} 至 {{value12}}
                    </td>
                </tr>
                <tr>
                    <td>
                        禁用
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value13" type="date" placeholder="选择日期" :disabled="disabled"></ui-date-time-picker>
                        <button class="ui button tiny" @click="switchDisable">切换</button>
                    </td>
                    <td>
                        {{value13}}
                    </td>
                </tr>
                </tbody>
            </table>
            <h3>实例-日期时间</h3>
            <table class="ui celled striped table">
                <thead>
                <tr>
                    <th width="10%">说明</th>
                    <th width="30%">实例</th>
                    <th width="30%">返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        日期时间
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value14"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value14}}
                    </td>
                </tr>
                <tr>
                    <td>
                        日期时间-最小值限制<br>（{{minDateTime}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value15"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss" @change="changeFn"
                            :min-date="minDateTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value15}}
                    </td>
                </tr>
                <tr>
                    <td>
                        日期时间-最大值限制<br>（{{maxDateTime}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value16"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            :max-date="maxDateTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value16}}
                    </td>
                </tr>
                <tr>
                    <td>
                        日期时间-最小值限制<br>（{{minDateTime}}）<br> 日期时间-最大值限制<br>（{{maxDateTime}}）
                    </td>
                    <td>
                        <ui-date-time-picker v-model="value17"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            :min-date="minDateTime"
                            :max-date="maxDateTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value17}}
                    </td>
                </tr>
                <tr>
                    <td>
                        独立日期时间范围
                    </td>
                    <td>
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker v-model="value18"
                                :max-date="value19"
                                type="datetime"
                                placeholder="选择开始日期"></ui-date-time-picker>
                        </div>
                        至
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker v-model="value19"
                                :min-date="value18"
                                type="datetime"
                                placeholder="选择结束日期"></ui-date-time-picker>
                        </div>
                    </td>
                    <td>
                        {{value18}} 至 {{value19}}
                    </td>
                </tr>
                <tr>
                    <td>
                        日期时间范围range
                    </td>
                    <td>
                        <ui-date-time-picker :range="true"
                            type="datetime"
                            :model-start.sync="value20"
                            :model-end.sync="value21"
                            size="mini"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value20}} 至 {{value21}}
                    </td>
                </tr>
                </tbody>
            </table>
            <h3>实例-时间</h3>
            <table class="ui celled striped table">
                <thead>
                <tr>
                    <th width="10%">说明</th>
                    <th width="30%">实例</th>
                    <th width="30%">返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        时间
                    </td>
                    <td>
                        <ui-date-time-picker :only-time="true"
                            v-model="value22"
                            placeholder="选择时间"
                            format="HH:mm" @change="changeFn"
                            timeString></ui-date-time-picker>
                    </td>
                    <td>
                        {{value22}}
                    </td>
                </tr>
                <tr>
                    <td>
                        时间-最小值限制<br> {{minTime}}
                    </td>
                    <td>
                        <ui-date-time-picker :only-time="true"
                            v-model="value23"
                            placeholder="选择时间"
                            :min-date="minTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value23}}
                    </td>
                </tr>
                <tr>
                    <td>
                        时间-最大值限制<br> {{maxTime}}
                    </td>
                    <td>
                        <ui-date-time-picker :only-time="true"
                            v-model="value24"
                            placeholder="选择时间"
                            :max-date="maxTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value24}}
                    </td>
                </tr>
                <tr>
                    <td>
                        时间-最小值限制<br> {{minTime}} <br> 时间-最大值限制<br> {{maxTime}}
                    </td>
                    <td>
                        <ui-date-time-picker :only-time="true"
                            v-model="value25"
                            placeholder="选择时间"
                            :min-date="minTime"
                            :max-date="maxTime"></ui-date-time-picker>
                    </td>
                    <td>
                        {{value25}}
                    </td>
                </tr>
                <tr>
                    <td>
                        独立时间范围
                    </td>
                    <td>
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker :only-time="true"
                                v-model="value26"
                                :max-date="value27"
                                placeholder="选择开始时间"></ui-date-time-picker>
                        </div>
                        至
                        <div style="display: inline-block; width:calc(50% - 12px);">
                            <ui-date-time-picker :only-time="true"
                                v-model="value27"
                                :min-date="value26"
                                placeholder="选择结束时间"></ui-date-time-picker>
                        </div>
                    </td>
                    <td>
                        {{value26}} 至 {{value27}}
                    </td>
                </tr>
                <tr>
                    <td>
                        时间范围range
                    </td>
                    <td>
                        <ui-date-time-picker :range="true"
                            :only-time="true"
                            :model-start.sync="value28"
                            :model-end.sync="value29"
                            size="mini" @changeLeft="changeFn1" @changeRight="changeFn2"
                            timeString></ui-date-time-picker>
                    </td>
                    <td>
                        {{value28}} 至 {{value29}}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="p-20">
            <ui-load-md file="ui-date-time-picker"></ui-load-md>
        </div>

    </ui-main>
</template>
<script>
    export default {
        name   : '',
        data () {
            return {
                value1     : '1502294400000',
                value2     : '',
                value3     : '',
                value4     : '',
                value5     : '2017-07-04',
                value6     : '2017-07',
                value7     : '2017',
                value8     : ['2017-07-13', '2017-07-20'],
                value9     : '',
                value10    : '',
                value11    : '',
                value12    : '',
                value13    : '',
                value14    : '',
                value15    : '',
                value16    : '',
                value17    : '',
                value18    : '',
                value19    : '',
                value20    : '',
                value21    : '',
                value22    : '',
                value23    : '',
                value24    : '',
                value25    : '',
                value26    : '',
                value27    : '',
                value28    : '',
                value29    : '',
                minDate    : '2017-11-11',
                maxDate    : '2017-11-25',
                minDateTime: '2017-11-11 08:08:08',
                maxDateTime: '2017-11-25 16:08:08',
                minTime    : '08:00:00',
                maxTime    : '18:00:00',
                disabled   : true
            }
        },
        mounted () {
            // console.log(this.$bui.formatDate(new Date(), 'MM-dd'));
            let _this = this;
            setTimeout(function () {
                _this.value22 = 1510358888000
            }, 3000);
        },
        watch  : {},
        methods: {
            switchDisable: function () {
                this.disabled = !this.disabled
            },
            changeFn: (v) => {
                console.log(v, 'only time');
            },
            changeFn1:(v) => {
                console.log(v, 'left time');
            },
            changeFn2:(v) => {
                console.log(v, 'right time');
            }
        }
    }
</script>
